/* Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import { t } from 'src/locale'

var FLOWABLE_EDITOR_TOUR = {
  /*
   * General 'getting started' tutorial for the Editor.
   */
  gettingStarted: function ($scope, useLocalStorage) {
    let userName;
    if (!$scope.account) {
      userName = '开发者'
    } else if ($scope.account.firstName) {
      userName = $scope.account.firstName;
    } else {
      userName = $scope.account.fullname;
    }

    const translations = [
      t('TOUR.WELCOME-TITLE', {userName: userName}),
      t('TOUR.WELCOME-CONTENT'),
      t('TOUR.PALETTE-TITLE'),
      t('TOUR.PALETTE-CONTENT'),
      t('TOUR.CANVAS-TITLE'),
      t('TOUR.CANVAS-CONTENT'),
      t('TOUR.DRAGDROP-TITLE'),
      t('TOUR.DRAGDROP-CONTENT'),
      t('TOUR.PROPERTIES-TITLE'),
      t('TOUR.PROPERTIES-CONTENT'),
      t('TOUR.TOOLBAR-TITLE'),
      t('TOUR.TOOLBAR-CONTENT'),
      t('TOUR.END-TITLE'),
      t('TOUR.END-CONTENT')
    ]
    // We're using a hack here due to https://github.com/sorich87/bootstrap-tour/issues/85:
    // when clicking next in the tour, it always sets the 'display' css property to 'none'
    // The hack is simple: before the next step is shown, we reset the 'display' property to 'block'

    var tourStepDomElements = ['body', '#paletteHelpWrapper',
      '#canvasHelpWrapper', '#propertiesHelpWrapper', '#editor-header'];

    var tour = new Tour({
      name: 'activitiEditorTour',
      storage: (useLocalStorage ? window.localStorage : false),
      container: 'body',
      backdrop: true,
      keyboard: true,
      steps: [
        {
          orphan: true,
          title: translations[0],
          content: translations[1],
          template: FLOWABLE_EDITOR_TOUR._buildStepTemplate(false, true, false, 300),
          onNext: FLOWABLE_EDITOR_TOUR._buildOnNextFunction(tourStepDomElements[0])
        },
        {
          element: tourStepDomElements[1],
          title: translations[2],
          content: translations[3],
          template: FLOWABLE_EDITOR_TOUR._buildStepTemplate(false, true, false, 400, 'flowable/images/tour/open-group.gif'),
          onNext: FLOWABLE_EDITOR_TOUR._buildOnNextFunction(tourStepDomElements[1])
        },
        {
          element: tourStepDomElements[2],
          title: translations[4],
          content: translations[5],
          placement: 'left',
          template: FLOWABLE_EDITOR_TOUR._buildStepTemplate(false, true, false),
          onNext: FLOWABLE_EDITOR_TOUR._buildOnNextFunction(tourStepDomElements[2])
        },
        {
          orphan: true,
          title: translations[6],
          content: translations[7],
          template: FLOWABLE_EDITOR_TOUR._buildStepTemplate(false, true, false, 720, 'flowable/images/tour/tour-dnd.gif'),
          onNext: FLOWABLE_EDITOR_TOUR._buildOnNextFunction(tourStepDomElements[0])
        },
        {
          element: tourStepDomElements[3],
          title: translations[8],
          content: translations[9],
          placement: 'top',
          template: FLOWABLE_EDITOR_TOUR._buildStepTemplate(false, true, false, 400),
          onNext: FLOWABLE_EDITOR_TOUR._buildOnNextFunction(tourStepDomElements[3])
        },
        {
          element: tourStepDomElements[4],
          title: translations[10],
          content: translations[11],
          placement: 'bottom',
          template: FLOWABLE_EDITOR_TOUR._buildStepTemplate(false, true, false, 400),
          onNext: FLOWABLE_EDITOR_TOUR._buildOnNextFunction(tourStepDomElements[4])
        },
        {
          orphan: true,
          title: translations[12],
          content: translations[13],
          template: FLOWABLE_EDITOR_TOUR._buildStepTemplate(false, false, true, 400),
          onNext: FLOWABLE_EDITOR_TOUR._buildOnNextFunction(tourStepDomElements[0])
        }
      ],

      onEnd: FLOWABLE_EDITOR_TOUR._buildOnEndFunction(tourStepDomElements)
    });

    tour.init();
    tour.start();
  },

  /*
   * Tutorial showing how to use the bendpoint functionality for sequenceflow
   */
  sequenceFlowBendpoint: function ($scope, useLocalStorage) {
    const translations = [
      t('FEATURE-TOUR.BENDPOINT.TITLE'), t('FEATURE-TOUR.BENDPOINT.DESCRIPTION')
    ]
    // We're using a hack here due to https://github.com/sorich87/bootstrap-tour/issues/85:
    // when clicking next in the tour, it always sets the 'display' css property to 'none'
    // The hack is simple: before the next step is shown, we reset the 'display' property to 'block'

    var tourStepDomElements = ['body'];
    var tour = new Tour({
      name: 'bendpointTour',
      storage: (useLocalStorage ? window.localStorage : false),
      container: 'body',
      backdrop: true,
      keyboard: true,
      steps: [
        {
          orphan: true,
          title: translations[0],
          content: translations[1],
          template: FLOWABLE_EDITOR_TOUR._buildStepTemplate(false, false, true, 500, 'flowable/images/tour/sequenceflow-bendpoint.gif'),
          onNext: FLOWABLE_EDITOR_TOUR._buildOnNextFunction(tourStepDomElements[0])
        }
      ],

      onEnd: FLOWABLE_EDITOR_TOUR._buildOnEndFunction(tourStepDomElements)
    });

    tour.init();
    tour.start();
  },


  _buildStepTemplate: function (addPrevButton, addNextButton, addEndTourButton, optionalForcedWidth, image) {

    var width = 200;
    if (optionalForcedWidth) {
      width = optionalForcedWidth;
    }

    var template =
      '<div class=\'popover tour\' style=\'max-width:' + width + 'px\'>' +
      '<div class=\'arrow\'></div>' +
      '<h3 class=\'popover-title\'></h3>' +
      '<div class=\'popover-content\'></div>' +
      '<div class=\'popover-navigation\'>';
    if (image) {
      template = template + '<div><img src=\'' + image + '\' style=\'border 1px solid black;margin:5px 0 5px 0;\'></img></div>';
    }
    if (addPrevButton) {
      template = template + '<button class=\'btn btn-sm btn-default \' data-role=\'prev\'>« Prev</button>';
    }
    if (addNextButton) {
      template = template + '<button class=\'btn btn-sm btn-default\' data-role=\'next\' style=\'float:right\'">Next »</button>';
    }
    if (addEndTourButton) {
      template = template + '<button class=\'btn btn-warning btn-sm\' data-role=\'end\' style=\'float:right\'">Got it!</button>';
    }

    template = template + '</div>' + '</nav>' + '</div>';
    return template;
  },

  _buildOnNextFunction: function (selector) {
    return function () {
      jQuery(selector).each(function (i, obj) {
        obj.style.display = 'block';
      })
    };
  },

  _buildOnEndFunction: function (selectors) {
    return function () {
      for (var elementsToResetIndex = 0; elementsToResetIndex < selectors.length; elementsToResetIndex++) {
        jQuery(selectors[elementsToResetIndex]).each(function (i, obj) {
          obj.style.display = 'block';
        });
      }
    }
  }
};
